console.log(goods)

class UIGoods {
  constructor (g) {
    this.data = g
    this.choice = 0
  }
  // 获取总价
  getTotalPrice () {
    return this.data.price * this.choice
  }

  // 是否选中
  isChoose () {
    return this.choice > 0
  }

  // 增加
  increase () {
    this.choice++
  }
  // 减少
  decrease () {
    if (this.choice === 0) {
      return
    }
    this.choice--
  }
}

// let uig = new UIGoods(goods[0])

// 整个界面数据
class UIData {
  constructor () {
    let uiGoods = []
    goods.map(item => {
      let uig = new UIGoods(item)
      uiGoods.push(uig)
    })
    this.uiGoods = uiGoods
    this.deliveryThreshold = 30
    this.deliveryPrice = 5
  }
  // 获取总价
  getTotalPrice () {
    return this.uiGoods.reduce((sum, val, index) => {
      return sum + val.getTotalPrice()
    }, 0)
  }

  // 增加某件商品的选购数量
  increase (index) {
    this.uiGoods[index].increase()
  }

  // 减少某件商品的选购数量
  decrease (index) {
    this.uiGoods[index].decrease()
  }

  // 获取总共的选中数量
  getTotalChooseNumber () {
    return this.uiGoods.reduce((sum, val, index) => {
      return sum + val.choice
    }, 0)
  }

  // 购物车有没有东西
  hasGoodsInCar () {
    return this.getTotalChooseNumber() > 0
  }

  // 是否超过了起送标准
  isCrossDeliveryThreshold () {
    return this.getTotalPrice() >= this.deliveryThreshold
  }

  // 某一个商品是否被选中
  isChoose (index) {
    return this.uiGoods[index].isChoose()
  }
}

// 整个界面
class UI {
  constructor () {
    this.uiData = new UIData()
    this.doms = {
      goodsContainer: document.querySelector('.goods-list'),
      deliveryPrice: document.querySelector('.footer-car-tip'),
      footerPay: document.querySelector('.footer-pay'),
      footerPayInnerSpan: document.querySelector('.footer-pay span'),
      totalPrice: document.querySelector('.footer-car-total'),
      car: document.querySelector('.footer-car'),
      badge: document.querySelector('.footer-car-badge')
    }

    // 设置跳跃的目标位置
    // getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置
    var carRect = this.doms.car.getBoundingClientRect()

    var jumpTarget = {
      x: carRect.left + carRect.width / 2,
      y: carRect.top + carRect.height / 5
    }
    this.jumpTarget = jumpTarget

    this.createHTML()
    this.updateFooter()
    this.listenEvent()
  }

  // 监听各种事件
  listenEvent () {
    // animationend （ 动画结束 ）事件在 CSS 动画 完成时触发
    this.doms.car.addEventListener('animationend', function () {
      this.classList.remove('animate')
    })
  }

  // 根据商品数据创建商品列表元素
  createHTML () {
    var html = ''
    for (var i = 0; i < this.uiData.uiGoods.length; i++) {
      var g = this.uiData.uiGoods[i]
      html += `<div class="goods-item">
      <img src="${g.data.pic}" alt="" class="goods-pic">
      <div class="goods-info">
        <h2 class="goods-title">${g.data.title}</h2>
        <p class="goods-desc">${g.data.desc}</p>
        <p class="goods-sell">
          <span>月售 ${g.data.sellNumber}</span>
          <span>好评率${g.data.favorRate}%</span>
        </p>
        <div class="goods-confirm">
          <p class="goods-price">
            <span class="goods-price-unit">￥</span>
            <span>${g.data.price}</span>
          </p>
          <div class="goods-btns">
            <i index="${i}" class="iconfont i-jianhao"></i>
            <span>${g.choose}</span>
            <i index="${i}" class="iconfont i-jiajianzujianjiahao"></i>
          </div>
        </div>
      </div>
    </div>`
    }
    this.doms.goodsContainer.innerHTML = html
  }

  increase (index) {
    this.uiData.increase(index)
    this.updateGoodsItem(index)
    this.updateFooter()
    this.jump(index)
  }

  decrease (index) {
    this.uiData.decrease(index)
    this.updateGoodsItem(index)
    this.updateFooter()
  }

  // 更新某个商品元素的显示状态
  updateGoodsItem (index) {
    var goodsDom = this.doms.goodsContainer.children[index]
    if (this.uiData.isChoose(index)) {
      goodsDom.classList.add('active')
    } else {
      goodsDom.classList.remove('active')
    }
    var span = goodsDom.querySelector('.goods-btns span')
    span.textContent = this.uiData.uiGoods[index].choice
  }

  // 更新页脚
  updateFooter () {
    // 得到总价数据
    var total = this.uiData.getTotalPrice()
    // 设置配送费
    this.doms.deliveryPrice.textContent = `配送费￥${this.uiData.deliveryPrice}`
    // 设置起送费还差多少
    if (this.uiData.isCrossDeliveryThreshold()) {
      // 到达起送点
      this.doms.footerPay.classList.add('active')
    } else {
      this.doms.footerPay.classList.remove('active')
      // 更新还差多少钱
      var dis = this.uiData.deliveryThreshold - total
      dis = Math.round(dis)
      this.doms.footerPayInnerSpan.textContent = `还差￥${dis}元起送`
    }
    // 设置总价
    this.doms.totalPrice.textContent = total.toFixed(2)
    // 设置购物车的样式状态
    if (this.uiData.hasGoodsInCar()) {
      this.doms.car.classList.add('active')
    } else {
      this.doms.car.classList.remove('active')
    }
    // 设置购物车中的数量
    this.doms.badge.textContent = this.uiData.getTotalChooseNumber()
  }

  // 购物车动画
  carAnimate () {
    this.doms.car.classList.add('animate')
  }

  // 抛物线跳跃的元素
  jump (index) {
    // 找到对应商品的加号
    var btnAdd = this.doms.goodsContainer.children[index].querySelector(
      '.i-jiajianzujianjiahao'
    )
    // getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置
    var rect = btnAdd.getBoundingClientRect()
    // 获取开始跳跃的位置
    var start = {
      x: rect.left,
      y: rect.top
    }
    // 跳吧
    var div = document.createElement('div')
    div.className = 'add-to-car'
    var i = document.createElement('i')
    i.className = 'iconfont i-jiajianzujianjiahao'
    // 设置新创建的元素的初始位置
    div.style.transform = `translateX(${start.x}px)`
    i.style.transform = `translateY(${start.y}px)`
    // 组装一个新的元素div套加号来做跳转
    div.appendChild(i)
    document.body.appendChild(div)
    // 强行渲染 读div的任何一个属性，都可以强行渲染
    div.clientWidth

    // 设置结束位置
    div.style.transform = `translateX(${this.jumpTarget.x}px)`
    i.style.transform = `translateY(${this.jumpTarget.y}px)`
    var that = this
    // transitionend CSS 完成过渡后触发
    div.addEventListener(
      'transitionend',
      function () {
        div.remove()
        that.carAnimate()
      },
      {
        once: true // 事件仅触发一次
      }
    )
  }
}

let ui = new UI()

// 事件
ui.doms.goodsContainer.addEventListener('click', function (e) {
  if (e.target.classList.contains('i-jiajianzujianjiahao')) {
    var index = +e.target.getAttribute('index')
    ui.increase(index)
  } else if (e.target.classList.contains('i-jianhao')) {
    var index = +e.target.getAttribute('index')
    ui.decrease(index)
  }
})

// 监听键盘的事件，触发商品的加减
window.addEventListener('keypress', function (e) {
  console.log(e.code)
  if (e.code === 'Equal') {
    ui.increase(0)
  } else if (e.code === 'Minus') {
    ui.decrease(0)
  }
})
